<template>
  <div id="bubble">
    <div class="box" :class="[selfActive ? selfBg: '']">
      <span>{{content}}</span>
    </div>
    <!-- <el-card class="box-card" body-style="padding:10px;">
      <span>{{content}}</span>
    </el-card> -->
  </div>
</template>

<script>
export default {
  name: 'bubble',
  components: {
  },
  props: {
    selfActive: Boolean,
    content: String
  },
  data () {
    return {
      // content: '测试',
      // selfActive: false,
      selfBg: 'selfBg'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
#bubble {
  width: 100%;
  float: left;
  margin-bottom: 2vh;
}
.box {
  border-radius: 20px;
  border-bottom-left-radius: 0px;
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width:fit-content;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  min-width: 15vw;
  max-width: 70vw;
  float: left;
  span {
    position: relative;
  }
  padding: 2vh;

}
.selfBg {
  background: #4fc08d;
  color: #fff;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 0px !important;
  float: right;
}
</style>